<div ng-controller="Camel.SendMessageController">

  <div class="tabbable" ng-model="tab">

    <div value="compose" class="tab-pane" title="Compose">
      <!--
         title="Compose a new message to send"
      -->

      <div class="row-fluid">
        <span ng-show="noCredentials" class="alert">
          No credentials set for endpoint!  Please set your username and password in the <a
            href="" ng-click="openPrefs()">Preferences</a> page
        </span>

        <form class="form-inline pull-right">
          <button class="btn" ng-click="addHeader()" title="Add a new message header"><i
              class="icon-plus"></i> Header
          </button>
          <button type="submit" class="btn btn-primary" ng-click="sendMessage()">Send message</button>
        </form>
      </div>

      <form class="form-inline bottom-margin" ng-submit="addHeader()">
        <ol class="zebra-list header-list">
          <div class="row-fluid">
            <li ng-repeat="header in headers">
              <div class="span4">
                <input type="text" style="width: 100%" class="headerName"
                       ng-model="header.name"
                       typeahead="completion for completion in defaultHeaderNames() | filter:$viewValue"
                       typeahead-editable='true'
                       placeholder="Header name">
              </div>
              <div class="span6">
                <input type="text" style="width: 100%" ng-model="header.value"
                       placeholder="Value of the message header">
              </div>
              <div class="span2">
                <button type="submit" class="btn" title="Add a new message header">
                  <i class="icon-plus"></i>
                </button>
                <button type="button" ng-click="removeHeader(header)" class="btn" title="Removes this message header">
                  <i class="icon-remove"></i>
                </button>
              </div>
            </li>
          </div>
        </ol>
      </form>

      <div class="row-fluid">
        <form class="form-inline">
          <div class="controls">
            <label class="control-label" for="sourceFormat" title="The text format to use for the message payload">Payload
              format: </label>
            <select ng-model="codeMirrorOptions.mode.name" id="sourceFormat">
              <option value="javascript">JSON</option>
              <option value="text" selected>Plain text</option>
              <option value="properties">Properties</option>
              <option value="xml">XML</option>
            </select>

            <button class="btn" ng-click="autoFormat()"
                    title="Automatically pretty prints the message so its easier to read">Auto format
            </button>
          </div>
        </form>
      </div>

      <div class="row-fluid">
        <textarea ui-codemirror="codeMirrorOptions" ng-model="message"></textarea>
      </div>
    </div>
    </tab>

    <div ng-switch="showChoose">
      <div ng-switch-when="true">
        <div value="choose" class="tab-pane" title="Choose">
          <!--
                   title="Choose messages to send from the available files in the Profile configuration for this container">
          -->
          <div class="row-fluid bottom-margin">
        <span ng-show="noCredentials" class="alert">
          No credentials set for endpoint!  Please set your username and password in the <a
            href="#/preferences">Preferences</a> page
        </span>
            <button type="submit" ng-disabled="!fileSelection().length" class="btn btn-primary pull-right"
                    ng-click="sendSelectedFiles()">
              <ng-pluralize count="fileSelection().length"
                            when="{'0': 'No files selected', '1': 'Send the file','other': 'Send {} files'}">
              </ng-pluralize>
            </button>
          </div>

          <p>Choose which files to send from the profile configuration:</p>

          <div class="control-group inline-block">
            <input class="search-query" type="text" ng-model="searchText" placeholder="Filter..." autofocus>
          </div>

          <ul>
            <li ng-repeat="fileName in profileFileNames | filter:searchText">
              <input type="checkbox" ng-model="selectedFiles[fileName]"> {{fileName}}
            </li>
          </ul>
        </div>
      </div>

    </div>

  </div>
</div>
